import { View, Image } from "@tarojs/components"
import React, { useEffect, useState } from "react"
import http from "@/request";
import viewMode from "@/store/viewMode";
import { MoneyFormat } from "@/utils/format";

import "./index.scss"

interface conutryType {
    id?: number
    name?: string
    gdp?: number
    engel?: number
    imgD?: string
    imgN?: string
}

const CountryMap: React.FC<{ gdp?: number, engel?: number }> = ({ gdp, engel }) => {
    const [country, setCountry] = useState<conutryType>()
    const loadMap = () => {
        if (gdp !== undefined || engel !== undefined) {
            let url = gdp !== undefined ? '/country/gdp' : '/country/engel'
            http.get(url, {
                amount: gdp || engel || 0
            }).then(res => {
                setCountry(res.data)
            })
        }
    }

    useEffect(() => {
        loadMap()
    }, [gdp, engel])

    return (
        <View className="map-container">
            <View className="country-info font-size32 flex-column flex-item text-main-color">
                <View className="flex1">{country?.name}</View>
                <View className="flex1">{gdp !== undefined ? '$' : ''}{MoneyFormat(engel ? country?.engel : country?.gdp)}{engel !== undefined ? '%' : ''}</View>
            </View>
            <Image className="country-img" mode="aspectFill" src={(viewMode.isNight ? country?.imgN : country?.imgD) || ''}></Image>
        </View>
    )
}
export default CountryMap